<template>
  <van-dialog v-model="isShow" :title="title" ref="dialog" :cancel-button-text="cancelButtonText"
              :show-cancel-button="showCancelButton" :show-confirm-button="showConfirmButton">
    <div class="test"></div>
    <van-image :src="emphasisImg" class="emphasis-bg" />
    <span v-for="(item,index) in contentList" :key="index" :class="item.isSign?'emphasis':''">{{item.content}}</span>
  </van-dialog>
</template>

<script>
import Vue from "vue";
import { Dialog } from "vant";
import { Image as VanImage } from "vant";

Vue.use(VanImage).use(Dialog);

export default {
  name: "AssessDialog",
  props: {
    // 标题
    title: {
      type: String,
      default: ""
    },
    // model
    message: {
      type: String,
      default: ""
    },
    // 是否展示取消按钮
    showCancelButton: {
      type: Boolean,
      default: true
    },
    // 取消按钮文案
    cancelButtonText: {
      type: String,
      default: ""
    },
    // 取消按钮颜色
    cancelButtonColor: {
      type: String,
      default: ""
    },
    // 图片
    emphasisImg: {
      type: String,
      default: ""
    },
    contentList:{
      type: Array,
      default: ()=>[]
    },
  },
  data() {
    return {
      showConfirmButton: false,
      isShow: false,
    };
  },

  methods: {
    showDailog() {
      this.isShow = true;
    }
  }
};
</script>

<style scoped lang="less">
.van-dialog {
  width: 550px !important;
  min-height: 722px !important;
  background: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 39%, #FFFFFF 39%, #FFFFFF 100%);

  ::v-deep .van-dialog__header {
    margin-top: 274px;
    line-height: 1.2;
  }

  ::v-deep .van-dialog__content {
    padding: 30px 30px 0 30px;
    box-sizing: border-box;
    text-align: left;
    span {
      display: inline-block;
      font-size: 28px;
      color: #2F3246;
      line-height: 44px;
      white-space: pre-wrap;
    }

    span.emphasis {
      margin: 0 10px;
      color: #5CCDAF;
    }
  }

  ::v-deep .van-dialog__footer {
    width: 470px !important;
    height: auto !important;
    margin: -2px auto 0 auto;
    border: none;

    .van-button {
      height: 88px !important;
      background: #5CCDAF;
      border-radius: 52px;
      margin: 50px auto 40px auto;
      color: #FFFFFF;
    }
  }

  .emphasis-bg {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0;
    z-index: 10000;
  }

  .test {
    width: 100%;
    height: 24%;
    position: absolute;
    top: 15%;
    left: 0;
    z-index: 10000;
    background: linear-gradient(180deg, #EBFFFA 0%, #FFFFFF 100%);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }
}


</style>
